<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到排名界面</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
   <table class="ta" border="1">
    <tr>
        <th>姓名：</th>
            <th>成绩：</th>
             </tr>
    
   </table>
   <div class="syy">上一页</div>
   <div class="xyy">下一页</div>
</body>
<script>
     $(document).ready(function(){
                 
        $.ajax({
            url:"/paiming",
            method:"get",
            dataType:"json",
            success:function(data){
                //console.log(data)
                let ta=document.getElementsByClassName('ta')[0];
                let syy=document.getElementsByClassName('syy')[0];
                let xyy=document.getElementsByClassName('xyy')[0];
                let page=1;
                //console.log(ta)
                for(let i=0;i<data.length;i++){
                    ta.innerHTML+=`
                        <td>`+data[i].name+`</td>
                        <td>`+data[i].sore+`</td>
                        </tr>`
                    // console.log(data[i].name)
                    // console.log(data[i].sore)
                }
                syy.addEventListener('click',function(){
                    if(page>1){
                        $.ajax({
                        url:"/paiming?page="+(page--)+"",
                        method:"get",
                        dataType:"json",
                        success:function(data){
                            ta.innerHTML=`<tr>
                        <th>姓名：</th>
                            <th>成绩：</th>
                             </tr>
                    <tr>`;
                            for(let i=0;i<data.length;i++){
                                ta.innerHTML+=`
                        <td>`+data[i].name+`</td>
                        <td>`+data[i].sore+`</td>
                        </tr>`
                        }
                    }
                    })
                    }
                })
                xyy.addEventListener('click',function(){
                    
                    $.ajax({
                        url:"/paiming?page="+(page++)+"",
                        method:"get",
                        dataType:"json",
                        success:function(data){
                            ta.innerHTML=`<tr>
                        <th>姓名：</th>
                            <th>成绩：</th>
                             </tr>
                    <tr>`;
                            for(let i=0;i<data.length;i++){
                                ta.innerHTML+=`
                        <td>`+data[i].name+`</td>
                        <td>`+data[i].sore+`</td>
                        </tr>`
                        }
                    }
                    })
                })
            }
           
        })
    })
</script>
</html>